import {
  ColorSwatch,
  ColorInput,
  Group,
  Flex,
  Badge,
  Box,
  Overlay,
  Modal,
  Table,
  Checkbox,
  Pagination,
  Image,
  Paper,
  Text,
  Center,
  LoadingOverlay,
  ActionIcon,
  Tooltip,
  TextInput,
  Button,
} from "@mantine/core";
import PageLayout from "@/components/PageLayout";
import { Alert } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";

import { useLocation } from "react-router-dom";
import _, { map } from "lodash";
import { useDisclosure } from "@mantine/hooks";
import { useForm } from "@mantine/form";
import { useAPIUtils } from "@/components/APIUtilsProvider";
import { IconPlus, IconReload } from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";
import { useTabbyData } from "@/hooks/useTabbyData";
import { useTabbyForm } from "@/hooks/useTabbyForm";
import WithwingsProgressIndicator from "../../components/WithwingsProgressIndicator";

export default function CreateWorld() {
  const { pathname } = useLocation();
  const { restPOST } = useAPIUtils();

  const [params, setParams] = useTabbyData(pathname, "params", { name: "" });
  const [worldList, setWorldList] = useTabbyData(pathname, "list", []);

  return (
    <PageLayout title={"后台任务进度演示"}>
      <Alert variant="light" title="提示" icon={<IconInfoCircle />}>
        有些业务（例如年度报表计算）需要花费较长的时间，实时的显示进度提供了更好的交互性。
        本页面模拟生成游戏地图来演示此项功能。
      </Alert>
      <Flex
        mih={50}
        mb={20}
        gap="sm"
        justify="flex-end"
        align="center"
        direction="row"
        wrap="wrap"
      >
        <TextInput
          placeholder="请输入世界名"
          value={params.name}
          onChange={(e) =>
            setParams((params) => {
              params.name = e.target.value;
            })
          }
        />
        <Button
          onClick={() =>
            restPOST("/world", { name: params.name }).then(({ id }) => {
              setWorldList((list) => [...list, id]);
              setParams({ name: "" });
            })
          }
        >
          创建新世界
        </Button>
      </Flex>
      {worldList?.map((id) => (
        <WithwingsProgressIndicator progressId={id} key={id} />
      ))}
    </PageLayout>
  );
}
